<template>
  <div class="introduction-page" @click.stop>
    <!-- <div class="book_top"> -->
      <!-- <div class="book_top_name">公司简介</div> -->
      <!-- <el-button class="book_top_add" plain>新增</el-button> -->
    <!-- </div> -->
    <div class="table_box">
      <WangEditor v-model="dataForm.details"></WangEditor>
    </div>
    <div class="button_on">

    <el-button  @click="onReturn()" plain>取消</el-button>
    <el-button type="primary" @click="onCon()">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, nextTick, onActivated } from "vue";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router"
import WangEditor from "@/components/wang-editor/index.vue";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const dataForm = reactive({
  details: ""
});
const onReturn = () => {
  router.replace({
    path: "/buyer/showroom/list"
  });
}
const onCon = () => {
  baseService.post("/noc/nocuser/updateNocUserDetails", dataForm).then((res) => {
      if (res.code == 0) {
        ElMessage.success({
            message: t("prompt.success") || "保存成功",
            duration: 500
          });
        //刷新
      }
    });
  console.log(dataForm)
};
// 组件挂载时执行初始化操作
onMounted(() => {
  // 从路由参数初始化编辑器内容，必要时进行 URL 解码
  // 兼容 string 与 string[] 场景，统一落入字符串
  const q = route.query.details as unknown;
  const initial = Array.isArray(q) ? (q[0] ?? "") : (q ?? "");
  // 先按需进行 URL 解码，再将纯文本包装为有效 HTML，保证编辑器可展示
  const decoded = decodeURLEncodedString(String(initial));
  const normalized = normalizeEditorHtml(decoded);
  // 在编辑器初次渲染后再赋值，确保数据处理完成后更新到编辑器
  nextTick(() => {
    dataForm.details = normalized;
  })
});
// 新增解码方法
// asfggggg%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%91%B1%E5%8F%A4%E5%8F%A4%E6%80%AA%E6%80%AA
const decodeURLEncodedString = (str: string): string => {
  // 多次解码：处理双重及多重 URL 编码（例如 %253C -> %3C -> <）
  // 最多迭代 5 次，避免极端情况造成性能问题
  let value = str;
  for (let i = 0; i < 5; i++) {
    const hasUrlEncoding = /%(?:[0-9A-Fa-f]{2})/.test(value);
    if (!hasUrlEncoding) break;
    try {
      const decoded = decodeURIComponent(value);
      if (decoded === value) break;
      value = decoded;
    } catch (e) {
      console.log("解码失败：", value);
      break;
    }
  }
  return value;
};

// 将纯文本内容包装为编辑器可识别的 HTML；若已是 HTML 则保持原样
const normalizeEditorHtml = (str: string): string => {
  // 空字符串直接返回
  if (!str) return "";
  const trimmed = str.trim();
  // 若以标签开头，直接返回；否则将内容包装到段落标签，保证编辑器渲染
  if (trimmed.startsWith("<")) return trimmed;
  return `<p>${trimmed}</p>`;
};
defineExpose({});
</script>
<style lang="less" scoped>
.introduction-page {
  width: 100%;
  height: 100%;
  // background: url("@/assets/images/bug_ba.png") no-repeat top left;
  // background-size: 100% auto;
  font-family: "Microsoft YaHei";
  min-height: 100vh;
  padding: 0 70px;
  box-sizing: border-box;
  .book_top {
    height: 102px;
    display: flex;
    align-items: center;

    border-bottom: 1px solid rgba(168, 171, 178, 1);
    margin-bottom: 30px;

    .book_top_name {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 34.75px;
      color: rgb(0, 0, 0);
      margin-right: 22px;
    }
  }

  .table_box {
  }
  .button_on{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
